<template>
  <view>
    <u-navbar
      is-back="true"
      back-icon-color="#f6f6f6"
      title="用户注册"
      title-color="#f6f6f6"
      :background="navBackground"
    ></u-navbar>
    <view class="wrap">
      <view class="top"></view>
      <view class="content">
        <view class="title">Register for 易搭衣橱</view>
        <u-form :model="form" ref="uForm">
          <u-form-item
            label="昵称:"
            label-width="120rpx"
            :left-icon-style="usernameStyle"
            :label-style="usernameStyle"
            left-icon="account-fill"
            prop="username"
          >
            <u-input v-model="form.username" placeholder="请输入用户昵称~" />
          </u-form-item>
          <!-- <u-form-item label="QQ:" label-width="120rpx" :left-icon-style="qqStyle" :label-style="contactStyle"
							left-icon="qq-circle-fill" prop="qq">
							<u-input v-model="form.qq" placeholder="请输入QQ号~" />
						</u-form-item> -->
          <u-form-item
            label="密码:"
            label-width="120rpx"
            :left-icon-style="passwordStyle"
            :label-style="passwordStyle"
            left-icon="lock-fill"
            prop="password"
          >
            <u-input
              v-model="form.password"
              type="password"
              placeholder="请输入用户密码~"
            />
          </u-form-item>
        </u-form>
        <u-form-item>
          <view @click="tapClause()">
            <u-checkbox :value="isCheck" label-size="28rpx"
              >同意
              <text
                style="color: #0b7fd7"
                under-line="true"
                @tap.stop="showClauseDetails()"
                >易搭衣橱用户协议</text
              >
            </u-checkbox>
          </view>
        </u-form-item>
        <u-button @click="submit" type="success" ripple="true">注册</u-button>
        <view class="alternative">
          <view class="password" @click="toLogin()">
            <u-icon name="arrow-left" color="#969cb9" size="28"></u-icon
            >返回登录
          </view>
        </view>
      </view>
      <view class="buttom">
        备注：获取QQ信息用于个人信息找回及其他反馈信息^_^!
      </view>
      <!--用户条款-->
      <u-popup v-model="showClause" mode="center">
        <scroll-view class="clause-box" scroll-y="true">
          <view class="main-title">易搭衣橱用户协议</view>
          <view class="sub-title">——欢迎使用易搭衣橱的服务！</view>
          <view class="clause-title">首部及导言</view>
          <view class="clause-content">
            <view>
              <text>{{
                '&ensp;&ensp;&ensp;&ensp;' +
                '使用易搭衣橱的服务，您应当阅读并遵守《易搭衣橱服务协议》（以下简称“本协议”）。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制易搭衣橱责任的条款、对用 户权利进行限制的条款、约定争议解决方式和司法管辖的条款等，以及开通或使用某项服务的单独协议或规则。限制、免责条款或者其他涉及您重大权益的条款可能以加粗、加下划线等形式提示您重点注意。'
              }}</text>
            </view>
            <view>
              <text>{{
                '&ensp;&ensp;&ensp;&ensp;' +
                '除非您已充分阅读、完全理解并接受本协议所有条款，否则您无权使用易搭衣橱服务。'
              }}</text>
              <text class="text-bold"
                >您点击“同意”或“下一步”，或您使用易搭衣橱服务，或者以其他任何明示或者默示方式表示接受本协议的，均视为您已阅读并同意签署本协议。</text
              >
              <text
                >本协议即在您与易搭衣橱之间产生法律效力，成为对双方均具有约束力的法律文件。</text
              >
            </view>
          </view>
          <view class="clause-title">一、【小程序的初衷】</view>
          <view class="clause-content">
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '1.1本小程序主要是为了为前端开发以及后台开发提供辅助，同时希望搭建本小程序锻炼自己的小程序开发能力，通过一些文章总结来提升自己对于thinkPHP后端框架以及bootstrap、jQuery前端框架的掌握程度。本小程序将主要作为分享型的个体开发小程序，并无意冒犯任何第三方或者通过第三方来谋取利益，但考虑到作为个体开发的时间与精力有限，本小程序会转载、整理第三方的信息。'
              }}
            </view>
            <view>
              <text class="text-bold">{{
                '&ensp;&ensp;&ensp;&ensp;' +
                '本小程序承诺：如果使用他人的分享，定会附上相关的链接，坚决维护第三方的知识产权。'
              }}</text>
            </view>
          </view>
          <view class="clause-title">二、【协议的范围】</view>
          <view class="clause-content">
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '2.1本协议是用户与易搭衣橱之间关于其使用易搭衣橱的服务所订立的协议。“易搭衣橱”是指易搭衣橱和/或其相关服务可能存在的运营关联单位。“用户”是指易搭衣橱的服务的使用人，在本协议中更多地称为“您”。'
              }}
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '2.2易搭衣橱的服务是指易搭衣橱向用户提供的，包括但不限于图片上传、穿搭推荐等相关产品及服务，具体服务以易搭衣橱实际提供的为准（以下简称“本服务”）。'
              }}
            </view>
          </view>
          <view class="clause-title">三、【帐号与密码安全】</view>
          <view class="clause-content">
            <view
              >{{
                '&ensp;&ensp;&ensp;&ensp;' +
                '3.1 您在使用本服务时可能需要注册一个帐号，由于开发经费问题，本小程序用户注册使用的验证方式'
              }}
              <text class="text-bold">没有设置</text
              >手机验证和电话验证，在正常情况下，不会向用户推广与本小程序无关的短信或者邮件。但如果用户因为使用不当导致电话或者邮箱泄露而收到垃圾短信或者邮件，本小程序不承担相应责任。
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '3.2易搭衣橱特别提醒您应妥善保管您的帐号和密码。如果忘记登录密码或者账号，请联系相关客服或者开发人员，当您使用完毕后，应安全退出。因您保管不善可能导致遭受被盗号或密码失窃，责任由您自行承担。'
              }}
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '3.3您在使用本服务过程中，可能可以为您使用的帐号设置昵称、头像、签名、留言等信息，也可能为您建立或者管理、图片、简介等信息，特别是本小程序的图片上传功能。您应当保证图片以及其他信息的内容和形式符合法律法规、公序良俗、社会公德以及易搭衣橱平台规则，且不会侵害任何主体的合法权益。'
              }}
            </view>
          </view>
          <view class="clause-title">四、【用户个人信息保护】</view>
          <view class="clause-content">
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '4.1保护用户个人信息是易搭衣橱的一项基本原则。对于网络黑客等不可抗因素，本小程序推荐用户不要使用QQ、微信等第三平台关联信息作为本账户信息。本小程序虽无法完全保证用户信息但是会在最大程度上，尽可能运用各种安全技术和程序建立完善的管理制度来保证用户使用本小程序时信息的安全性。'
              }}
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '4.2您在注册帐号或使用本服务的过程中，可能需要填写一些必要的信息。若国家法律法规有特殊规定的，您需要填写真实的身份信息。若您填写的信息不完整，则可能无法使用本服务或在使用过程中受到限制。'
              }}
            </view>
            <view
              >{{
                '&ensp;&ensp;&ensp;&ensp;' +
                '4.3 一般情况下，您可根据相关产品规则浏览、修改自己提交的信息，但出于安全性考虑，您可能无法修改注册时提供的注册信息。'
              }}
            </view>
            <view
              >{{
                '&ensp;&ensp;&ensp;&ensp;' +
                '4.4 易搭衣橱不会将您的个人信息转移或披露给任何第三方，'
              }}<text class="text-bold">除非：</text></view
            >
            <view class="col-sm-offset-1">
              <view>（1）相关法律法规或司法机关、行政机关要求。</view>
              <view>（2）为完成合并、分立、收购或资产转让而转移。</view>
              <view>（3）为提供您要求的服务所必需。</view>
            </view>
          </view>
          <view class="clause-title">五、【使用本服务的方式】</view>
          <view class="clause-content">
            <view>{{
              '&ensp;&ensp;&ensp;&ensp;' +
              '5.1 本服务仅为您个人非商业性质的使用，除非您与易搭衣橱另有约定。'
            }}</view>
            <view
              >{{ '&ensp;&ensp;&ensp;&ensp;' + '5.2 您依本协议条款所取得的权利'
              }}<text class="text-bold">不可转让</text>。</view
            >
            <view
              >{{ '&ensp;&ensp;&ensp;&ensp;' + '5.3 您' }}
              <text class="text-bold">不得使用</text>
              任何方式（包括但不限于第三方软件、插件、外挂、系统、设备等）对本服务进行干扰、破坏、修改或施加其他影响。
            </view>
            <view
              >{{
                '&ensp;&ensp;&ensp;&ensp;' +
                '5.4 您应当通过易搭衣橱提供或认可的方式使用本服务，'
              }}
              <text class="text-bold">不得通过</text
              >任何第三方软件、插件、外挂、系统、设备等登录或使用本服务。
            </view>
            <view
              >{{ '&ensp;&ensp;&ensp;&ensp;' + '5.5 任何人未经易搭衣橱授权' }}
              <text class="text-bold">不得使用</text
              >任何第三方软件、插件、外挂、系统等查看、获取本服务中所包含的易搭衣橱、易搭衣橱合作伙伴或用户的任何相关信息、数据等内容。
            </view>
          </view>
          <view class="clause-title">六、【按现状提供服务】</view>
          <view class="clause-content">
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '6.1您应当理解，您使用本服务需自行准备与相关服务有关的终端设备（如电脑、移动终端和必要的网络接入设备等装置），并承担所需的费用（如电话费、上网费等费用）。'
              }}
            </view>
            <view>{{
              '&ensp;&ensp;&ensp;&ensp;' +
              '6.2 您理解并同意，您使用本服务时会耗用您的终端设备和带宽等资源。'
            }}</view>
          </view>
          <view class="clause-title">七、【站点广告】</view>
          <view class="clause-content">
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '7.1您同意易搭衣橱可以自行或由第三方通过短信、电子邮件或电子信息等多种方式向您发送、展示广告或其他信息（包括商业与非商业信息），广告或其他信息的具体发送及展示形式、频次及内容等以易搭衣橱实际提供为准。'
              }}
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '7.2易搭衣橱将依照相关法律法规要求开展广告业务。您同意，对本服务中出现的广告，您应审慎判断其真实性和可靠性，除法律明确规定外，您应对因该广告而实施的行为负责。'
              }}
            </view>
          </view>
          <view class="clause-title">八、【第三方提供的产品或服务】</view>
          <view class="clause-content">
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '8.1您在易搭衣橱平台上使用第三方提供的产品或服务时，除遵守本协议约定外，还应遵守第三方的用户协议。易搭衣橱和第三方对可能出现的纠纷在法律规定和约定的范围内各自承担责任。'
              }}
            </view>
          </view>
          <view class="clause-title">九、【知识产权声明】</view>
          <view class="clause-content">
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '9.1易搭衣橱在本服务中提供的内容（包括程序代码等）的知识产权归易搭衣橱所有，用户在使用本服务中所产生内容的知识产权归用户或相关权利人所有，除非您与易搭衣橱另有约定。'
              }}
            </view>
            <view>{{
              '&ensp;&ensp;&ensp;&ensp;' +
              '9.2 除另有特别声明外，易搭衣橱提供本服务时所依托软件的著作权、专利权及其他知识产权均归易搭衣橱所有。'
            }}</view>
            <view class="text-bold">
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '9.3 易搭衣橱在本服务中所使用的“易搭衣橱”及“易搭衣橱logo”等标识，其著作权归易搭衣橱所有。'
              }}
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '9.4上述及其他任何本服务包含的内容的知识产权均受到法律法规保护，未经易搭衣橱、用户或相关权利人书面许可，任何人不得以任何形式进行使用或创造相关衍生作品。'
              }}
            </view>
          </view>
          <view class="clause-title" id="action">十、【用户违法违规行为】</view>
          <view class="clause-content">
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '10.1您在使用本服务时须遵守法律法规，不得制作、复制、发布、传播含有下列内容的信息或从事相关行为，也不得为制作、复制、发布、传播含有下列内容的信息或从事相关行为提供便利：'
              }}
              <view class="col-sm-offset-1">
                <view>（1）反对宪法所确定的基本原则的。</view>
                <view
                  >（2）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的。</view
                >
                <view>（3）损害国家荣誉和利益的。</view>
                <view>（4）煽动民族仇恨、民族歧视，破坏民族团结的。</view>
                <view>（5）破坏国家宗教政策，宣扬邪教和封建迷信的。    </view>
                <view>（6）散布谣言，扰乱社会秩序，破坏社会稳定的。</view>
                <view
                  >（7）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的。</view
                >
                <view>（8）侮辱或者诽谤他人，侵害他人合法权益的。 </view>
                <view
                  >（9）违反法律法规底线、社会主义制度底线、国家利益底线、公民合法权益底线、社会公共秩序底线、道德风尚底线和信息真实性底线的“七条底线”要求的。</view
                >
                <view
                  >（10）相关法律法规或本协议、相关协议、规则等禁止的。</view
                >
              </view>
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '10.2如果您在使用本服务过程中违反了相关法律法规或本协议约定，相关国家机关或机构可能会对您提起诉讼、罚款或采取其他制裁措施，并要求易搭衣橱给予协助。'
              }}
              <text class="text-bold"
                >因此给您或者他人造成损害的，您应自行承担全部责任，易搭衣橱不承担任何责任。</text
              >
            </view>
            <view class="text-bold">
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '10.3如果您违反本协议约定，易搭衣橱有权进行独立判断并采取相应措施，包括但不限于通过技术手段删除、屏蔽相关内容或断开链接等。同时，易搭衣橱有权视用户的行为性质，采取包括但不限于暂停或终止向您提供服务，限制、中止、冻结或终止您对本小程序服务的使用权，追究法律责任等措施。'
              }}
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '10.4您违反本协议约定，导致任何主体损失的，您应当独立承担责任；易搭衣橱因此遭受损失的，您也应当一并赔偿，因使用本服务而使易搭衣橱违反法律法规或卷入政治和公共事件，否则易搭衣橱有权暂停或终止对您的服务。'
              }}
            </view>
          </view>
          <view class="clause-title">十一、【不可抗力及其他免责事由】</view>
          <view class="clause-content">
            <view class="text-bold">
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '11.1您理解并同意，在使用本服务的过程中，可能会遇到不可抗力等风险因素，使本服务受到影响。不可抗力是指不能预见、不能克服并不能避免且对一方或双方造成重大影响的客观事件，包括但不限于自然灾害如洪水、地震、瘟疫流行和风暴等以及社会事件如战争、动乱、政府行为等。出现上述情况时，易搭衣橱将努力在第一时间与相关单位配合，争取及时进行处理，但是由此给您造成的损失易搭衣橱在法律允许的范围内免责。'
              }}
            </view>
            <view class="text-bold"
              >{{
                '&ensp;&ensp;&ensp;&ensp;' +
                '11.2 在法律允许的范围内，易搭衣橱对以下情形导致的服务中断或受阻不承担责任：'
              }}
              <view class="col-sm-offset-1">
                <view
                  >（1）受到计算机病毒、木马或其他恶意程序、黑客攻击的破坏。</view
                >
                <view
                  >（2）用户或易搭衣橱的电脑软件、系统、硬件和通信线路出现故障。
                   </view
                >
                <view
                  >（3）用户操作不当或用户通过非易搭衣橱授权的方式使用本服务。</view
                >
                <view>（4）程序版本过时、设备的老化和/或其兼容性问题。</view>
                <view>（5）其他易搭衣橱无法控制或合理预见的情形。</view>
              </view>
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '11.3您理解并同意，在使用本服务的过程中，可能会遇到网络信息或其他用户行为带来的风险，易搭衣橱不对任何信息的真实性、适用性、合法性承担责任，也不对因侵权行为给您造成的损害负责。'
              }}
              <text class="text-bold">这些风险包括但不限于：</text>
              <view class="col-sm-offset-1">
                <view
                  >（1）来自他人匿名或冒名的含有威胁、诽谤、令人反感或非法内容的信息。</view
                >
                <view
                  >（2）遭受他人误导、欺骗或其他导致或可能导致的任何心理、生理上的伤害以及经济上的损失。</view
                >
                <view>（3）其他因网络信息或用户行为引起的风险。</view>
              </view>
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '11.4 易搭衣橱依据本协议约定获得处理违法违规内容的权利，该权利不构成易搭衣橱的义务或承诺，易搭衣橱不能保证及时发现违法行为或进行相应处理。'
              }}
            </view>
            <view>
              {{
                '&ensp;&ensp;&ensp;&ensp;' +
                '11.5在任何情况下，您不应轻信借款、索要密码或其他涉及财产的信息。涉及财产操作的，请一定先核实对方身份，并请经常留意易搭衣橱有关防范诈骗犯罪的提示。'
              }}
            </view>
          </view>
          <view class="clause-options">
            <button type="warn" class="clause-btn" @click="disagreeClause">
              取消
            </button>
            <button type="primary" class="clause-btn" @click="agreeClause">
              同意
            </button>
          </view>
        </scroll-view>
      </u-popup>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      navBackground: app.globalData.navBackground,
      showClause: false,
      isCheck: false,
      usernameStyle: {
        color: '#f2a2dd',
        fontWeight: 'bold',
      },
      qqStyle: {
        size: '24',
        color: '#8d89ff',
        fontWeight: 'bold',
      },
      contactStyle: {
        color: '#8d89ff',
        fontWeight: 'bold',
      },
      passwordStyle: {
        color: '#35e661',
        fontWeight: 'bold',
      },
      form: {
        username: '',
        password: '',
        qq: '',
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户昵称~',
          },
          {
            min: 2,
            message: '用户昵称至少2位~',
          },
        ],
        qq: [
          {
            required: true,
            message: '请输入QQ号~',
          },
          {
            min: 5,
            message: 'QQ号码无效~',
          },
          {
            max: 10,
            message: 'QQ号码无效~',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入用户密码~',
          },
          {
            min: 6,
            message: '用户密码至少为六位~',
          },
        ],
      },
    };
  },
  computed: {
    inputStyle() {
      let style = {};
      if (this.tel) {
        style.color = '#fff';
        style.backgroundColor = this.$u.color['warning'];
      }
      return style;
    },
  },
  methods: {
    showClauseDetails: function () {
      this.showClause = true;
    },
    disagreeClause: function () {
      this.isCheck = false;
      this.showClause = false;
    },
    agreeClause: function () {
      this.isCheck = true;
      this.showClause = false;
    },
    tapClause() {
      this.isCheck ? this.disagreeClause() : this.agreeClause();
    },
    toLogin() {
      uni.navigateTo({
        url: '/pages/user/login',
      });
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (!this.isCheck) {
            app.showToast('请同意用户协议~');
            return;
          }
          uni.request({
            url: app.globalData.baseUrl + '/user/register',
            data: {
              user_name: this.form.username,
              password: this.form.password,
              //qq:this.form.qq
            },
            method: 'POST',
            success(res) {
              if (res.data.code == 2000) {
                app.showToast('注册成功~', 'success');
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 2000);
              } else {
                app.showToast(res.data.msg);
              }
            },
            fail(err) {
              console.log('数据发送失败', err);
            },
          });
        } else {
          console.log('验证失败');
        }
      });
    },
  },
  onLoad() {
    console.log('输出globalData:', app.globalData);
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  font-size: 28rpx;

  .content {
    width: 600rpx;
    margin: 80rpx auto 0;

    .title {
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
      margin-bottom: 160rpx;
      color: #87abf2;
    }

    input {
      text-align: left;
      margin-bottom: 10rpx;
      padding-bottom: 6rpx;
    }

    .tips {
      color: $u-type-info;
      margin-bottom: 60rpx;
      margin-top: 8rpx;
    }

    .alternative {
      color: $u-tips-color;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }

  .buttom {
    margin-top: 40px;
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    color: #c096e0;
  }
}

.main-title {
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  margin-bottom: 15px;
}

.sub-title {
  text-align: right;
  font-weight: bold;
  margin-bottom: 5px;
}

.clause-box {
  padding: 5px 10px;
  width: 90%;
  margin: 0px auto;
  height: 450px;
}

.clause-title {
  font-weight: bold;
}

.clause-content {
  margin-top: 8px;
}

.text-bold {
  font-weight: bold;
}

.clause-options {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
}

.clause-btn {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}
</style>
